<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>ComboBox - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../themes/icon.css">
	<link rel="stylesheet" type="text/css" href="demo.css">
	<script type="text/javascript" src="../jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="../jquery.easyui.min.js"></script>
	<script>
		function loadData(){
			$('#cc').combobox({
				url:'combobox_data.json',
				valueField:'id',
				textField:'text'
			});
		}
		function setValue(){
			$('#cc').combobox('setValue','CO');
		}
		function getValue(){
			var val = $('#cc').combobox('getValue');
			alert(val);
		}
		function disable(){
			$('#cc').combobox('disable');
		}
		function enable(){
			$('#cc').combobox('enable');
		}
	</script>
</head>
<body>
	<h2>下拉组合框 - ComboBox</h2>
	<div class="demo-info">
		<div class="demo-tip icon-tip"></div>
		<div>在组合框尝试自动完成类型。<br>
		</div>
	</div>
	
	<div style="margin:10px 0;">
		<a href="#" class="easyui-linkbutton" onclick="loadData()">加载数据</a>
		<a href="#" class="easyui-linkbutton" onclick="setValue()">设置值</a>
		<a href="#" class="easyui-linkbutton" onclick="getValue()">取得值</a>
		<a href="#" class="easyui-linkbutton" onclick="disable()">禁用</a>
		<a href="#" class="easyui-linkbutton" onclick="enable()">激活</a>
	</div>
	
	<p>简单的下拉组合框: </p>
	<select id="cc" class="easyui-combobox" name="state" style="width:200px;" data-options="required:true">
		<option value="AL">Alabama</option>
		<option value="AK">Alaska</option>
		<option value="AZ">Arizona</option>
		<option value="AR">Arkansas</option>
		<option value="CA">California</option>
		<option value="CO">Colorado</option>
		<option value="CT">Connecticut</option>
		<option value="DE">Delaware</option>
		<option value="FL">Florida</option>
		<option value="GA">Georgia</option>
		<option value="HI">Hawaii</option>
		<option value="ID">Idaho</option>
		<option value="IL">Illinois</option>
		<option value="IN">Indiana</option>
		<option value="IA">Iowa</option>
		<option value="KS">Kansas</option>
		<option value="KY">Kentucky</option>
		<option value="LA">Louisiana</option>
		<option value="ME">Maine</option>
		<option value="MD">Maryland</option>
		<option value="MA">Massachusetts</option>
		<option value="MI">Michigan</option>
		<option value="MN">Minnesota</option>
		<option value="MS">Mississippi</option>
		<option value="MO">Missouri</option>
		<option value="MT">Montana</option>
		<option value="NE">Nebraska</option>
		<option value="NV">Nevada</option>
		<option value="NH">New Hampshire</option>
		<option value="NJ">New Jersey</option>
		<option value="NM">New Mexico</option>
		<option value="NY">New York</option>
		<option value="NC">North Carolina</option>
		<option value="ND">North Dakota</option>
		<option value="OH" selected>Ohio</option>
		<option value="OK">Oklahoma</option>
		<option value="OR">Oregon</option>
		<option value="PA">Pennsylvania</option>
		<option value="RI">Rhode Island</option>
		<option value="SC">South Carolina</option>
		<option value="SD">South Dakota</option>
		<option value="TN">Tennessee</option>
		<option value="TX">Texas</option>
		<option value="UT">Utah</option>
		<option value="VT">Vermont</option>
		<option value="VA">Virginia</option>
		<option value="WA">Washington</option>
		<option value="WV">West Virginia</option>
		<option value="WI">Wisconsin</option>
		<option value="WY">Wyoming</option>
	</select>
	
	<p>多选下拉组合框: （通过读取JSON文件加载下拉数据）</p>
	<input class="easyui-combobox" 
			name="language"
			data-options="
					url:'documentation/combobox_data.json',
					valueField:'id',
					textField:'text',
					multiple:true,
					panelHeight:'auto'
			">
            <h3>页面代码： </h3>
<pre name="code" class="html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
	&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot;&gt;
	&lt;title&gt;ComboBox - jQuery EasyUI Demo&lt;/title&gt;
	&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;../themes/default/easyui.css&quot;&gt;
	&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;../themes/icon.css&quot;&gt;
	&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;demo.css&quot;&gt;
	&lt;script type=&quot;text/javascript&quot; src=&quot;../jquery-1.7.2.min.js&quot;&gt;&lt;/script&gt;
	&lt;script type=&quot;text/javascript&quot; src=&quot;../jquery.easyui.min.js&quot;&gt;&lt;/script&gt;
	&lt;script&gt;
		function loadData(){
			$('#cc').combobox({
				url:'combobox_data.json',
				valueField:'id',
				textField:'text'
			});
		}
		function setValue(){
			$('#cc').combobox('setValue','CO');
		}
		function getValue(){
			var val = $('#cc').combobox('getValue');
			alert(val);
		}
		function disable(){
			$('#cc').combobox('disable');
		}
		function enable(){
			$('#cc').combobox('enable');
		}
	&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;h2&gt;下拉组合框 - ComboBox&lt;/h2&gt;
	&lt;div class=&quot;demo-info&quot;&gt;
		&lt;div class=&quot;demo-tip icon-tip&quot;&gt;&lt;/div&gt;
		&lt;div&gt;在组合框尝试自动完成类型。&lt;br&gt;
		&lt;/div&gt;
	&lt;/div&gt;
	
	&lt;div style=&quot;margin:10px 0;&quot;&gt;
		&lt;a href=&quot;#&quot; class=&quot;easyui-linkbutton&quot; onclick=&quot;loadData()&quot;&gt;l加载数据&lt;/a&gt;
		&lt;a href=&quot;#&quot; class=&quot;easyui-linkbutton&quot; onclick=&quot;setValue()&quot;&gt;设置值&lt;/a&gt;
		&lt;a href=&quot;#&quot; class=&quot;easyui-linkbutton&quot; onclick=&quot;getValue()&quot;&gt;取得值&lt;/a&gt;
		&lt;a href=&quot;#&quot; class=&quot;easyui-linkbutton&quot; onclick=&quot;disable()&quot;&gt;禁用&lt;/a&gt;
		&lt;a href=&quot;#&quot; class=&quot;easyui-linkbutton&quot; onclick=&quot;enable()&quot;&gt;激活&lt;/a&gt;
	&lt;/div&gt;
	
	&lt;p&gt;简单的下拉组合框: &lt;/p&gt;
	&lt;select id=&quot;cc&quot; class=&quot;easyui-combobox&quot; name=&quot;state&quot; style=&quot;width:200px;&quot; data-options=&quot;required:true&quot;&gt;
		&lt;option value=&quot;AL&quot;&gt;Alabama&lt;/option&gt;
		&lt;option value=&quot;AK&quot;&gt;Alaska&lt;/option&gt;
		&lt;option value=&quot;AZ&quot;&gt;Arizona&lt;/option&gt;
		&lt;option value=&quot;AR&quot;&gt;Arkansas&lt;/option&gt;
		&lt;option value=&quot;CA&quot;&gt;California&lt;/option&gt;
		&lt;option value=&quot;CO&quot;&gt;Colorado&lt;/option&gt;
		&lt;option value=&quot;CT&quot;&gt;Connecticut&lt;/option&gt;
		&lt;option value=&quot;DE&quot;&gt;Delaware&lt;/option&gt;
		&lt;option value=&quot;FL&quot;&gt;Florida&lt;/option&gt;
		&lt;option value=&quot;GA&quot;&gt;Georgia&lt;/option&gt;
		&lt;option value=&quot;HI&quot;&gt;Hawaii&lt;/option&gt;
		&lt;option value=&quot;ID&quot;&gt;Idaho&lt;/option&gt;
		&lt;option value=&quot;IL&quot;&gt;Illinois&lt;/option&gt;
		&lt;option value=&quot;IN&quot;&gt;Indiana&lt;/option&gt;
		&lt;option value=&quot;IA&quot;&gt;Iowa&lt;/option&gt;
		&lt;option value=&quot;KS&quot;&gt;Kansas&lt;/option&gt;
		&lt;option value=&quot;KY&quot;&gt;Kentucky&lt;/option&gt;
		&lt;option value=&quot;LA&quot;&gt;Louisiana&lt;/option&gt;
		&lt;option value=&quot;ME&quot;&gt;Maine&lt;/option&gt;
		&lt;option value=&quot;MD&quot;&gt;Maryland&lt;/option&gt;
		&lt;option value=&quot;MA&quot;&gt;Massachusetts&lt;/option&gt;
		&lt;option value=&quot;MI&quot;&gt;Michigan&lt;/option&gt;
		&lt;option value=&quot;MN&quot;&gt;Minnesota&lt;/option&gt;
		&lt;option value=&quot;MS&quot;&gt;Mississippi&lt;/option&gt;
		&lt;option value=&quot;MO&quot;&gt;Missouri&lt;/option&gt;
		&lt;option value=&quot;MT&quot;&gt;Montana&lt;/option&gt;
		&lt;option value=&quot;NE&quot;&gt;Nebraska&lt;/option&gt;
		&lt;option value=&quot;NV&quot;&gt;Nevada&lt;/option&gt;
		&lt;option value=&quot;NH&quot;&gt;New Hampshire&lt;/option&gt;
		&lt;option value=&quot;NJ&quot;&gt;New Jersey&lt;/option&gt;
		&lt;option value=&quot;NM&quot;&gt;New Mexico&lt;/option&gt;
		&lt;option value=&quot;NY&quot;&gt;New York&lt;/option&gt;
		&lt;option value=&quot;NC&quot;&gt;North Carolina&lt;/option&gt;
		&lt;option value=&quot;ND&quot;&gt;North Dakota&lt;/option&gt;
		&lt;option value=&quot;OH&quot; selected&gt;Ohio&lt;/option&gt;
		&lt;option value=&quot;OK&quot;&gt;Oklahoma&lt;/option&gt;
		&lt;option value=&quot;OR&quot;&gt;Oregon&lt;/option&gt;
		&lt;option value=&quot;PA&quot;&gt;Pennsylvania&lt;/option&gt;
		&lt;option value=&quot;RI&quot;&gt;Rhode Island&lt;/option&gt;
		&lt;option value=&quot;SC&quot;&gt;South Carolina&lt;/option&gt;
		&lt;option value=&quot;SD&quot;&gt;South Dakota&lt;/option&gt;
		&lt;option value=&quot;TN&quot;&gt;Tennessee&lt;/option&gt;
		&lt;option value=&quot;TX&quot;&gt;Texas&lt;/option&gt;
		&lt;option value=&quot;UT&quot;&gt;Utah&lt;/option&gt;
		&lt;option value=&quot;VT&quot;&gt;Vermont&lt;/option&gt;
		&lt;option value=&quot;VA&quot;&gt;Virginia&lt;/option&gt;
		&lt;option value=&quot;WA&quot;&gt;Washington&lt;/option&gt;
		&lt;option value=&quot;WV&quot;&gt;West Virginia&lt;/option&gt;
		&lt;option value=&quot;WI&quot;&gt;Wisconsin&lt;/option&gt;
		&lt;option value=&quot;WY&quot;&gt;Wyoming&lt;/option&gt;
	&lt;/select&gt;
	
	&lt;p&gt;多选下拉组合框: &lt;/p&gt;
	&lt;input class=&quot;easyui-combobox&quot; 
			name=&quot;language&quot;
			data-options=&quot;
					url:'combobox_data.json',
					valueField:'id',
					textField:'text',
					multiple:true,
					panelHeight:'auto'
			&quot;&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
</pre>
<SCRIPT type=text/javascript>
	dp.SyntaxHighlighter.ClipboardSwf = 'documentation/js/clipboard.swf'/*tpa=http://jeasyui.com/SyntaxHighlighter/Scripts/clipboard.swf*/;
	dp.SyntaxHighlighter.HighlightAll('code');
</SCRIPT>